<template>
  <HuilanBasic>
    <div class="AiccFlowDesign">
      <div class="design-set">

        <el-input
          size="small"
          v-model="aiccFlowId"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click.stop="openDesiner"
          icon="el-icon-c-scale-to-original"
        >设计</el-button>

      </div>
      <HuilanDialog
        append-to-body
        :fullscreen="true"
        :visible.sync="designVisible"
        class="process-design-dialog"
        :class="{ noClose: noClose }"
      >
        <aicc-process-desiner
          v-if="designVisible"
          ref="desinerSettingRef"
          :cur="curAiMultitalkRow"
          :curCateId="curAiMultitalkRow.categoryId"
          :defalutOpenTab="desinerDefalutOpenTab"
          @close="designDialogClose"
          :viewProcessDesignFlag="viewProcessDesignFlag"
          :isProcessOrTemplate="isProcessOrTemplate"
        ></aicc-process-desiner>
      </HuilanDialog>
    </div>
  </HuilanBasic>
</template>
<script>
import {
  getAiccFlowById,
} from "@/api/aihuman/aiccFlow/index.js";
import {
  isNull
} from '@/util/qsgCommon.js';

export default {
  name: 'AiccFlowDesign',
  components: {

  },
  created() {
    // ?aiccFlowId=d69a9679a1f045e78055d7b75bb94f6d
    this.aiccFlowId = this.$route.query.aiccFlowId;
    this.canClose = this.$route.query.canClose;
    this.noClose = !this.canClose;
  },
  data() {
    return {
      aiccFlowId: '',
      onlyDesign: false,
      designVisible: false,

      noClose: true,

      desinerDefalutOpenTab: '',
      viewProcessDesignFlag: false, //是查看还是设计
      isProcessOrTemplate: 'process', //是流程还是模板
      curAiMultitalkRow: {},
    }
  },
  methods: {
    openDesiner() {
      // this.designVisible = true;
      this.getAiccFlowData();
      this.noClose = false;
    },
    designDialogClose() {
      this.designVisible = false;
      this.noClose = true;
    },
    async getAiccFlowData() {
      if (isNull(this.aiccFlowId)) {
        this.$message({
          type: "error",
          message: "请设置流程参数！",
        });
        return
      }
      const dataParams = {
        id: this.aiccFlowId,
      }
      await getAiccFlowById(dataParams).then((res) => {
        // console.log(res.data);
        if (isNull(res.data.data)) {
          this.$message({
            type: "error",
            message: "未查询到相关流程！",
          });
        } else {
          this.curAiMultitalkRow = { ...res.data.data };
          this.designVisible = true;
        }

      })
    }
  },
  watch: {

  },
  async mounted() {
    this.getAiccFlowData();
  },
}

</script>
<style lang="scss" scoped>
.AiccFlowDesign {
  .design-set {
    width: 480px;
    display: flex;

    .el-button {
      margin-left: 10px;
    }
  }
}

.process-design-dialog {
  ::v-deep .el-dialog__body {
    padding: 0px;
  }

  ::v-deep .el-dialog__header {
    display: none;
  }

  &.noClose {
    ::v-deep .close-process-btn {
      display: none;
    }

    ::v-deep .wordsEditor-row-wrap .wordsEditor-right .wordsEditor-node-head {
      position: fixed;
      top: 0;
      right: 0;
      height: 48px;
      background-color: #0045c8;
      overflow: hidden;

      .process-save-btn {
        margin-top: 0px;

        .el-button {
          color: #565863;
          background-color: #fff;
          border-color: #dcdfe6;
        }
      }
    }
  }


}
</style>